// 横屏主页面
class MainPage {
  constructor(canvas, ctx, gameManager, api, rootImgUrl) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.gameManager = gameManager;
    this.api = api
    this.rootImgUrl = rootImgUrl
    this.avatar = wx.createImage();
    this.shareIcon = wx.createImage();
    this.practiceBtn = wx.createImage();
    this.rankingBtn = wx.createImage();
    this.challengeBtn = wx.createImage();
    this.mainBg = wx.createImage();
    this.claimPrizeBg = wx.createImage();
  }

  onEnter() {
    this.loadResources()
    console.log('进入横屏主页面');
  }

  onLeave() {
    console.log('离开主页面');
  }

  update() {
    // 主页面的更新逻辑
  }

  loadResources() {
    // 加载头像图片
    this.avatar.src = this.gameManager.getUserData().avatar ? this.gameManager.getUserData().username : this.rootImgUrl + 'avatar.png';
    // 加载分享按钮图标
    this.shareIcon.src = this.rootImgUrl + 'share.png';
    // 中间菜单背景图
    this.mainBg.src = this.rootImgUrl + 'mainBg.png';
    // 加载练习赛图片
    this.practiceBtn.src = this.rootImgUrl + 'practiceBtn.png';
    // 加载排位赛图片
    this.rankingBtn.src = this.rootImgUrl + 'rankingBtn.png';
    // 加载挑战赛图片
    this.challengeBtn.src = this.rootImgUrl + 'challengeBtn.png';
    // 加载每日领奖弹窗背景图片
    this.claimPrizeBg.src = this.rootImgUrl + 'signPopupBg.png';

    // 资源加载完成后开始渲染
    let loadedCount = 0;
    const totalResources = 7;

    const checkLoaded = () => {
      loadedCount++;
      if (loadedCount === totalResources) {
        // wx.hideLoading();
        this.render();
      }
    };

    this.claimPrizeBg.onload = checkLoaded;
    this.avatar.onload = checkLoaded;
    this.mainBg.onload = checkLoaded;
    this.shareIcon.onload = checkLoaded;
    this.practiceBtn.onload = checkLoaded;
    this.rankingBtn.onload = checkLoaded;
    this.challengeBtn.onload = checkLoaded;
  }

  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    // 横屏主页面背景
    this.ctx.drawImage(this.mainBg, 0, 0, this.canvas.width, this.canvas.height);

    // 绘制上中下三部分布局
    this.drawTopSection();
    this.drawMiddleSection();
    this.drawBottomSection();
  }

  drawTopSection() {
    // 绘制头像
    this.ctx.drawImage(this.avatar, 44, 18, 68, 68);

    // 左边头像昵称
    this.ctx.fillStyle = '#ffffff';
    this.ctx.font = '28px Microsoft YaHei-Regular';
    this.ctx.fillText(this.gameManager.getUserData().user_name, 148, 40);

    // 右边分享按钮
    this.ctx.fillStyle = '#FCF4C4';
    this.ctx.font = '28px Microsoft YaHei-Regular';
    this.ctx.fillText('分享领资金：5/5', 1040, 40);
    this.ctx.drawImage(this.shareIcon, 1296, 22, 58, 58);
  }

  drawMiddleSection() {
    // 绘制三个主要功能区域
    this.ctx.drawImage(this.practiceBtn, 160, 140, 358, 476);
    this.ctx.drawImage(this.rankingBtn, 632, 140, 358, 476);
    this.ctx.drawImage(this.challengeBtn, 1104, 140, 358, 476);
  }

  drawBottomSection() {
    // 底部区域 - 高度120
    const bottomY = 650;
    // this.ctx.fillStyle = '#0F1316';
    // this.ctx.fillRect(0, 652, this.canvas.width, 100);

    const bottomItems = [
      { name: '排行榜', icon: '🏆' },
      { name: '学院', icon: '🎓' },
      { name: '公告', icon: '📢' },
      { name: '客服', icon: '👨‍💼' },
      { name: '教程', icon: '📚' }
    ];

    bottomItems.forEach((item, index) => {
      const x = 80 + index * 320;

      // 绘制图标
      this.ctx.fillStyle = '#FCF4C4';
      this.ctx.textBaseline = 'top';
      this.ctx.font = '32px Microsoft YaHei-Regular';
      this.ctx.fillText(item.icon, x + 20, bottomY + 40);

      this.ctx.fillStyle = '#FCF4C4';
      this.ctx.font = '32px Microsoft YaHei-Regular';
      this.ctx.fillText(item.name, x + 90, bottomY + 42);
    });
  }

  dayClaimPrizeSection() {
    this.ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; // 半透明黑色
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.drawImage(this.claimPrizeBg, this.canvas.width / 2 - this.claimPrizeBg.width / 2, this.canvas.height / 2 - this.claimPrizeBg.height / 2, 1222, 567);
  }

  handleTouch(x, y) {
    // 检查是否点击了练习场按钮
    if (y >= 326 && y <= 375) {
      if (x >= 0 && x <= 163) {
        this.gameManager.switchPage('ranking');
      } else if (x >= 165 && x <= 320) {
        this.gameManager.switchPage('gameOver');
      }
    }
    if (x >= 80 && x <= 259 && y >= 70 && y <= 308) {
      this.gameManager.switchPage('game');
    }
    if (x >= 30 && x <= 100 && y >= 10 && y <= 50) {
      this.gameManager.switchPage('profile');
    }
  }

  handleKeyDown(e) {
    switch (e.keyCode) {
      case 49: // 数字1
        this.gameManager.switchPage('game');
        break;
      case 50: // 数字2
        this.gameManager.switchPage('profile');
        break;
    }
  }

  handleTouchEnd(e) {

  }
}

export default MainPage;